<script setup lang="ts">
import { useStore } from '../../../utils/store'
const store = useStore()
const handleClick = () => {
    store.isCollapseSwitch()
}
</script>
<template>
    <div class="header-container flex-box">
        <div class="header-left" @click="handleClick()">
            <el-icon size="25">
                <Fold />
            </el-icon>
        </div>
        <div class="header-right flex-box">
            <el-dropdown placement="bottom-start">
                <el-avatar :size="35" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <p>admin</p>
        </div>
    </div>

</template>
<style scoped lang="scss">
.header-container {
    height: 100%;
    width: 100%;
    justify-content: space-between;
    background-color: #FFF;

}

.header-left {
    width: 45px;
    height: 100%;
    padding-left: 8.5px;
    padding-top: 8.5px;
    box-sizing: border-box;
    // border: 1px solid red;

    &:hover {
        background-color: #F5F5F5;
        cursor: pointer;
    }
}

.header-right {
    padding-right: 10px;
    justify-content: space-around;
    width: 130px;
    height: 40px;

    // border: 1px solid red;
    .el-avatar {
        outline: none;
        cursor: pointer;
    }

}
</style>